/**
 * Phone module
 */
import React from 'react';

import switchTypes from '../../../../consts/switchTypes';

class Phone extends React.Component {
    componentDidMount() {
        const mainPhone = $(this.refs.mainPhone);
        mainPhone.draggable();
    }
    render() {
        const { showSnap, switchType, page, style } = this.props;
        const snapNode = showSnap ? <div className="h5_snap_theme" style={{ width: '100%', height: '100%' }} /> : '';
        const isCustom = page && page.page_background && parseInt(page.page_background.custom);
        const bacImg = isCustom ? page.page_background.url : is.CONST.media_src;
        const bacColor = isCustom ? `#${page.page_background.backgroundColor}` : 'white';
        const pStyle = {
            backgroundImage: `url(${bacImg}) `,
            backgroundColor: `${bacColor}`,
        };

        return (
          <div className={`editor-main-phone ${switchTypes.H5_AR !== switchType ? 'editor-main-no-phone' : ''}`} style={style}>
            <div className="main-phone" style={pStyle} ref="mainPhone">
              {snapNode}
            </div>
            <div className="toptip">{$._('Please edit in the orange field')}</div>
            <div className="topborder" />
            <div className="yuan" />
            <div className="yuan1" />
            <div className="leftborder" />
            <div className="leftborder border-moddle" />
            <div className="leftborder border-last" />
            <div className="caozuoyuan" />
          </div>
        );
    }
}

module.exports = Phone;
